<template>
	<view class="index-agent" v-if="isData && !loadding" :data-theme="theme()">
		<view class="banner">
			<image lazy-load :src="top_background" mode="aspectFill" class="banner-img" />
		</view>
		<view class="body">
			<!-- 头信息 -->
			<view class="info-top d-flex">
				<view class="info-ava">
					<image lazy-load class="info-avatar" :src="user&&user.avatarUrl" mode="aspectFill" />

				</view>
				<view class="info-meta flex-1">
					<view class="nick d-s-c">
						<view class="nickName text-ellipsis">{{ user&&user.nickName }}</view>
						<view class="info-grade" v-if="agent&&agent.grade" @click="onClickUpgrade">
							{{ agent.grade.name }}
						</view>
					</view>
					<view class="referee">
						推荐人：{{ agent&&agent.refereeNickname ||'平台'}}
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="share-btn" open-type="share" plain>
					<text class="icon iconfont icon-share1"></text>
					<text> 分享店铺</text>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<button class="share-btn" @click="showShare">
					<text class="icon iconfont icon-share1"></text>
					<text> 分享店铺</text>
				</button>
				<!-- #endif -->
			</view>

			<!-- 	<view class="level-tip  d-s-c d-r">
				<image src="/static/icon/grade1.png" style="width: 75rpx;height: 85rpx;"></image>
				<view class="tip-text flex-1 ml10">
					<text class="f30 fb">{{ agent&&agent.grade&&agent.grade.name? agent.grade.name: '等级未解锁'}}</text>
					<br><text class="">下单、邀请好友可提升等级</text>
				</view>
				<view class="btn-upgrade" @click="onClickUpgrade" v-if="upgradeInfo && Object.keys(upgradeInfo).length">
					去升级
					<text class="icon iconfont icon-jiantou1" style="color: #54412C;font-size: 18rpx;"></text>
				</view>
			</view> -->
		</view>
		<view class="p-0-20 bottom-boxs">
			<!-- 金额卡片 -->
			<view class="card amount-card ">
				<image class="card-bg" src="/static/agent/card-bg.png" mode="aspectFill"></image>
				<view class="amount-card-content">
					<view class="d-b-c d-r ml30 mb20">
						<view class="d-b-s d-c flex-1 ">
							<text class=" ">{{ info_words&&info_words.index&&info_words.index.money }}</text>
							<text class="f52 fb">{{ agent&&agent.money||'0.00' }}</text>
						</view>
						<button class="btn-withdraw  "
							@click="gotoCash">{{ info_words&&info_words.index&&info_words.index.cash }}</button>

					</view>
					<view class="amount-list d-flex">
						<view class="d-b-c d-c amount-item flex-1">
							<text
								class="amount-label">{{ info_words&&info_words.index&&info_words.index.sumMoney }}</text>
							<text class="amount-value">{{ agent&&agent.sumMoney||'0.00' }}</text>

						</view>

						<view class="d-b-c d-c amount-item flex-1">
							<text
								class="amount-label">{{ info_words&&info_words.index&&info_words.index.totalMoney }}</text>
							<text class="amount-value">{{ agent&&agent.totalMoney||'0.00' }}</text>

						</view>

						<view class="d-b-c d-c amount-item flex-1">
							<text
								class="amount-label">{{ info_words&&info_words.index&&info_words.index.settledMoney }}</text>
							<text class="amount-value">{{ agent&&agent.settledMoney||'0.00' }}</text>

						</view>
						<!-- <view class="d-b-c d-c amount-item flex-1">
							<text class="amount-label">{{ info_words&&info_words.index&&info_words.index.money }}</text>
							<text class="amount-value">{{ agent&&agent.money||'0.00' }}</text>

						</view>

						<view class="d-b-c d-c amount-item flex-1">
							<text
								class="amount-label">{{ info_words&&info_words.index&&info_words.index.totalMoney }}</text>
							<text class="amount-value">{{ agent&&agent.totalMoney||'0.00' }}</text>

						</view>

						<view class="d-b-c d-c amount-item flex-1">
							<text
								class="amount-label">{{ info_words&&info_words.index&&info_words.index.freezeMoney }}</text>
							<text class="amount-value">{{ agent&&agent.freezeMoney||'0.00' }}</text>

						</view> -->
					</view>
				</view>

			</view>

			<!-- 功能入口 -->

			<view class="entry-container">
				<view class="entry-item" v-for="(item, idx) in entryList" :key="idx" @click="gotoPage(item.url)">
					<image class="entry-icon" :src="item.icon" mode="aspectFit" />
					<text class="entry-text">{{ item.label }}</text>
				</view>
			</view>
		</view>

		<!-- 遮罩 -->
		<view class="modal-mask" v-if="showUpgradeModal" @click="closeUpgradeModal">
		</view>

		<!-- 底部弹框 -->
		<view class="upgrade-modal" v-if="showUpgradeModal">
			<view class="modal-header d-b-c d-r">
				<text class="title flex-1">快速升级技巧</text>
				<text class="close " @click="closeUpgradeModal">×</text>
			</view>
			<view class="modal-body">
				<view class="modal-section d-b-s d-c">
					<text
						class="section-title">{{upgradeInfo&&upgradeInfo.gradeInfo&&upgradeInfo.gradeInfo.name}}未解锁</text>
					<text class="section-sub">{{upgradeInfo.describe}}</text>
				</view>
				<view class="task-item d-s-s d-c" v-for="(task, idx) in upgradeInfo.taskList" :key="idx">
					<text class="task-label">{{ task.typeName }}</text>
					<view class="d-b-c d-r">
						<view class="progress-bar">
							<view class="progress-inner" :style="{ width: (task.getNum / task.number * 100) + '%' }">
							</view>
						</view>
						<view class="task-btn" @click="onTaskClick(task)">{{ task.finishStatus>0?'已完成':'去完成' }}
						</view>
					</view>

					<view class="d-b-c d-r ww100">
						<view class="d-b-c d-r ww100">
							<text class="task-desc">{{ task.describe }}</text>
							<text class="task-progress">{{ task.getNum }}/{{ task.number }}</text>
						</view>
						<view style="width: 200rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<canvas canvas-id="pageCanvas"
			style="width: 375px; height: 667px; position: fixed; top: -1000px; left: -1000px" />
		<MpShare :isMpShare="isMpShare" @close="closeShare"></MpShare>
		<!--app分享-->
		<!-- #ifdef APP-PLUS -->
		<AppShare :isAppShare="isAppShare" :appParams="appParams" @close="closeShare"></AppShare>
		<!-- #endif -->
	</view>
</template>

<script>
	import AppShare from "@/components/app-share.vue";
	import MpShare from "@/components/mp-share.vue";
	export default {
		components: {
			AppShare,
			MpShare,
		},
		data() {
			return {
				screenshotUrl: '',
				showUpgradeModal: false,
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*0：不是分销商，1：分销商申请中，2：已经是分销商*/
				is_agent: 0,
				isData: false,
				agent: {},
				/*顶部背景*/
				top_background: "",
				/*基本信息*/
				info_words: {},
				words: {},
				user: {},
				upgradeInfo: {},
				titel: "",
				apply: '',
				urldata: '',
				isAppShare: false,
				appParams: {
					title: "",
					summary: "",
					path: "",
				},
				/*公众号分享*/
				isMpShare: false,
				rawEntryList: [{
						icon: '/static/agent/txmx.png',
						key: 'cashDetail',
						url: '/pages/agent/cash/list/list'
					},
					{
						icon: '/static/agent/fxdd.png',
						key: 'order',
						url: '/pages/agent/order/order'
					},
					{
						icon: '/static/agent/wdtd.png',
						key: 'team',
						url: '/pages/agent/team/team'
					},
					{
						icon: '/static/agent/tgewm.png',
						key: 'qrcode',
						url: '/pages/agent/qrcode/newQrcode'
					},
					{
						icon: '/static/agent/spgl.png',
						key: 'productManage',
						url: '/pages/agent/apply/productList'
					},
					{
						icon: '/static/agent/djsm.png',
						key: 'gradeDesc',
						url: '/pages/agent/index/grade'
					},
				],
			};
		},
		onShareAppMessage(e) {
			let self = this;
			// let img = e.target.dataset.screenshot || '/static/jt.png';
			let img = '/static/jt.jpg';
			// 构建页面参数
			let params = self.getShareUrlParams({
				userId: self.agent.userId,
				refereeId: self.user.userId,
			});
			return {
				title: self.agent.nickName + '的小店',
				path: "/pages/agent/index/store?" + params,
				imageUrl: img,
			};
		},
		computed: {
			entryList() {
				// 防空判断，没数据就返回一个空数组
				if (!this.info_words) {
					return [];
				}
				const w = this.info_words;
				// key 对应你后端返回的字段名
				const map = {
					cashDetail: w.cashList && w.cashList.title || '提现明细',
					order: w.order && w.order.title || '分销订单',
					team: w.team && w.team.title || '我的团队',
					qrcode: w.qrcode && w.qrcode.title || '推广二维码',
					productManage: w.product && w.product.title || '商品管理',
					gradeDesc: w.grade && w.grade.title || '等级说明',
				};
				return this.rawEntryList.map(item => ({
					icon: item.icon,
					url: item.url,
					label: map[item.key] || '',
				}));
			}
		},
		onLoad(e) {
			if (e.is_agent) {
				this.is_agent = e.is_agent;
			}
			//#ifdef H5
			if (this.isWeixin()) {
				this.urldata = window.location.href;
			}
			//#endif
		},
		onShow() {
			uni.showLoading({
				title: "加载中",
			});
			/*获取个人中心数据*/
			this.getData();

		},
		methods: {
			onTaskClick(e) {
				let url = e.page || '/pages/index/index';
				this.gotoPage(url);
			},
			capturePage() {
				// 要让页面先渲染完成再截，建议用 nextTick 延迟一下
				this.$nextTick(() => {
					uni.createSelectorQuery()
						.selectViewport() // or 选你想截的某个容器
						.fields({ // 拿到宽高
							size: true,
							scrollOffset: true
						})
						.exec((res) => {
							const {
								width,
								height,
								scrollTop
							} = res[0];
							uni.canvasToTempFilePath({
								canvasId: 'pageCanvas',
								x: 0,
								y: 0,
								width,
								height,
								destWidth: width * 2, // 提高分辨率
								destHeight: height * 2,
								success: (r) => {
									this.screenshotUrl = r.tempFilePath;
								},
								fail: (err) => {
									console.error('截屏失败', err);
								}
							}, this.$scope);
						});
				});
			},
			/*获取数据*/
			getData() {
				let self = this;
				self._get("user/agent/center", {
					url: self.urldata,
				}, function(res) {
					const d = res.data;
					if (d.isApplying !== 30 && d.isAgent === false) {
						uni.redirectTo({
							url: '/pages/agent/apply/apply'
						});
						return;
					}
					if (d.isApplying === 30 && d.isAgent === false) {
						uni.redirectTo({
							url: '/pages/agent/apply/newApply'
						});
						return;
					}
					self.info_words = d.words;
					self.upgradeInfo = d.upgradeInfo;
					self.is_agent = d.isAgent;
					self.top_background = d.background;
					self.agent = d.agent;
					self.user = d.user;
					// 配置微信分享参数
					//#ifdef H5
					if (self.urldata != "" && res.data.share && res.data.share.signPackage) {
						let params = {
							userId: self.agent.userId,
							refereeId: self.user.userId,

						};
						console.log("paramsssss", params);
						self.configWx(
							res.data.share.signPackage,
							res.data.share.shareParams,
							params
						);
					}
					//#endif
					self.isData = true;
					self.loadding = false;
					uni.hideLoading();
				});
			},
			showShare() {
				let self = this;
				//#ifndef APP-PLUS
				self.isMpShare = true;
				//#endif
				//#ifdef APP-PLUS
				self.appParams.title = self.agent.nickName;
				// 构建页面参数
				let params = self.getShareUrlParams({
					userId: self.agent.userId,
					refereeId: self.user.userId,
				});
				self.appParams.path = "/pages/agent/index/store?" + params;
				self.appParams.image = self.detail.share.file_path;
				self.isAppShare = true;
				//#endif
			},
			//关闭分享
			closeShare(data) {
				this.isAppShare = false;
				this.isMpShare = false;
			},


			/*去提现*/
			gotoCash() {
				this.gotoPage("/pages/agent/cash/apply/apply");
			},
			openUpgradeModal() {
				this.showUpgradeModal = true;
			},
			// 关闭弹框
			closeUpgradeModal() {
				this.showUpgradeModal = false;
			},
			// “去升级” 按钮
			onClickUpgrade() {
				if (!this.upgradeInfo) {
					return
				}
				this.openUpgradeModal();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.index-agent {
		position: relative;
		background: #f5f5f5;
		width: 100%;
		min-height: 100vh;
		overflow-x: hidden;
	}

	/* banner */
	.banner {
		width: 750rpx;
		height: 348rpx;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;

		.banner-img {
			width: 100%;
			height: 100%;
		}
	}

	/* 整体内容向下推 */
	.body {
		position: relative;
		z-index: 1;
		// padding: 0 20rpx;
		// margin-top: ;
	}

	/* 头部信息 */
	.info-top {
		border-radius: 24rpx;
		padding: 28rpx 24rpx 26rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		// height: 273rpx;

		.info-ava {
			position: relative;
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border: 4rpx solid #fff;
			border-radius: 50%;

			.info-avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;

				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			}


		}

		.info-grade {
			// position: absolute;
			// top: 10rpx;
			// right: -150px;
			display: inline-block;
			line-height: 46rpx;
			background: rgba(255, 255, 255, 0.15);
			color: #FCE9B3;
			font-size: 22rpx;
			padding: 0 16rpx;
			border-radius: 46rpx;
			margin-left: 14rpx;
			font-weight: normal;
		}

		.info-meta {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.nickName {
				color: #FDE9B3;
				font-size: 30rpx;
				max-width: 300rpx;
			}

			.nick {
				color: #FDE9B3;
			}

			.referee {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #EDE6CB;
			}
		}

		.share-btn {
			position: absolute;
			right: 0;
			top: 30rpx;
			background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
			color: #5A3713;
			font-size: 22rpx;
			padding: 0 20rpx 0 26rpx;
			border-radius: 30rpx 0 0 30rpx;
			border: #EEE;

			.iconfont {
				font-size: 22rpx;
				color: #5A3713;
			}
		}
	}

	.level-tip {
		width: 702rpx;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(255, 255, 255, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 20rpx 20rpx 0 0;
		background: linear-gradient(180deg, #212221 100%, #FFFFFF 100%);
		color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		position: relative;
		top: -119rpx;

		.tip-text {
			font-size: 24rpx;
			color: #fff;
		}

		.btn-upgrade {
			background: #F2D69D;
			color: #333;
			padding: 8rpx 20rpx;
			border-radius: 200rpx;
			font-size: 24rpx;
		}
	}

	/* 白卡片通用 */
	.card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.03);
		margin-bottom: 20rpx;
	}

	/* 金额卡片 */
	.amount-card {
		padding: 30rpx 20rpx;
		background: linear-gradient(180deg, #FEFBED 0%, #EADABA 100%);
		color: #5A3713;
		border-radius: 25rpx;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(255, 255, 255, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
		margin-bottom: 24rpx;
		position: relative;

		.amount-card-content {
			position: relative;
			z-index: 1;
		}

		.card-bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			width: 100%;
			height: 100%;
		}

		.amount-list {
			display: flex;
			align-items: center;

			.amount-item {
				text-align: center;

				.amount-value {
					font-size: 36rpx;
					color: #5A3713;
				}

				.amount-label {
					color: #5A3713;
				}



			}

			.divider {
				width: 1rpx;
				height: 80rpx;
				background: #EEE;
				margin: 0 20rpx;
			}
		}

	}

	.entry-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;


	}

	.entry-item {
		width: 342rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		padding: 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.entry-icon {
		width: 78rpx;
		height: 78rpx;
		margin-bottom: 16rpx;
	}

	.entry-text {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.btn-withdraw {
		width: 182rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
		border-radius: 32rpx;
		color: #5A3713;
	}

	/* 遮罩层 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	/* 底部弹框 */
	.upgrade-modal {
		overflow-y: auto;
		position: fixed;
		max-height: 50vh;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		z-index: 1001;
		/* 动画可选 */
		animation: slideUp .3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	/* 弹框头部 */
	.modal-header {

		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #eee;

		.title {
			text-align: center;

			font-size: 30rpx;
			font-weight: 500;
			color: #111111;
		}

		.close {
			font-size: 36rpx;
		}
	}

	/* 弹框内容区 */
	.modal-body {
		padding: 24rpx 30rpx;
		max-height: 30vh;
		overflow-y: scroll;
		box-sizing: border-box;

		.modal-section {
			.section-title {
				font-size: 28rpx;
				color: #333;
			}

			.section-sub {
				font-size: 24rpx;
				color: #999;
				margin-top: 8rpx;
			}

			margin-bottom: 20rpx;
		}

		.task-item {

			margin-bottom: 16rpx;

			.task-label {
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #111111;
			}

			.task-desc {
				flex: 2;
				font-size: 24rpx;
				color: #999;
			}

			.task-progress {
				width: 80rpx;
				text-align: right;
				font-size: 24rpx;
			}

			.task-btn {
				margin-left: 20rpx;
				white-space: nowrap;
				padding: 15rpx 40rpx;
				background: #F82E4D;
				color: #fff;
				border-radius: 40rpx;
				font-size: 24rpx;
			}


		}
	}

	.progress-bar {
		flex: 1;
		width: 520rpx;
		height: 16rpx;
		background: #f0f0f0;
		border-radius: 8rpx;
		overflow: hidden;

		.progress-inner {
			height: 100%;
			background: #FF3B30;
			border-radius: 8rpx;
		}
	}

	.bottom-boxs {
		z-index: 1;
		// background-color: #F2F2F2;
		// border-radius: 20rpx 20rpx 0 0;
		// margin-top: -37rpx;
		position: relative;
		padding-top: 0;
		// top: -119rpx;
	}
</style>